<script setup lang='ts'>
import { onMounted, ref } from "vue"
import { useRouter } from 'vue-router'
import { getPublishBookDetailInfo, getPublishBookChapterList, getBookComment } from "@/api/index"
import { computed } from "@vue/reactivity";
import { useCounterStore } from '../stores/counter'
import LoadingPage from "@/components/LoadingPage.vue"
import CommentPage from "@/components/CommentPage.vue"
import AllCommentPage from "@/components/AllCommentPage.vue"

const isLoadingPage = ref<boolean>(true)
const $router = useRouter()

const bookDetail = ref<any>()
const bookScriptType = ref<string>('path')
const bookChapterList = ref<any>([])
const bookComment = ref<any>();
const showAllReply = ref<boolean>(false)
onMounted(async () => {
    let querys = $router.currentRoute.value.query
    let bookDetailRes = await getPublishBookDetailInfo(querys.id, querys.title)
    bookDetail.value = bookDetailRes.data.feed.entry

    let bookChapterRes = await getPublishBookChapterList(querys.id)
    bookChapterList.value = bookChapterRes.data.ncx.navMap.navPoint
    store.getChapter(bookChapterList.value)

    let bookCommentRes = await getBookComment(querys.id)
    bookComment.value = bookCommentRes.data.all
    store.getAllComment(bookComment.value.list)

    isLoadingPage.value = false

})

const store = useCounterStore()


const bookScript = computed(() => {
    return bookDetail.value.content.text.substr(0, 45)
})

const updateMounth = computed(() => {
    let t = new Date(1673275220663);
    let m: any = t.getMonth() + 1;
    m = m < 10 ? '0' + m : m;
    return m
})

const updateDay = computed(() => {
    let t = new Date(1673275220663);
    let d: any = t.getDate();
    d = d < 10 ? '0' + d : d;
    return d
})

const getCOmmentTime = (time: any) => {
    let t = new Date(time);
    let y = t.getFullYear();
    let m: any = t.getMonth() + 1
    let d: any = t.getDay()
    m = m < 10 ? '0' + m : m;
    d = d < 10 ? '0' + d : d;
    return `${y}年${m}月${d}日`
}

const showAllCommentList = ref<any>([])
const toShowAllReply = (commentId: string) => {
    showAllReply.value = true;
    showAllCommentList.value = [...showAllCommentList.value, commentId]

}
</script>

<template>
    <div class="detail" v-if="bookDetail && !isLoadingPage">
        <div class="detail-title">
            <div class="title">
                <img src="@/assets/imgs/返回1.png" alt="" @click="$router.back()">
                <div class="right">
                    <span>加入购物车</span>
                    <img src="@/assets/imgs/购物车1.png" alt="">
                    <img src="@/assets/imgs/分享1.png" alt="">
                </div>
            </div>
        </div>
        <div class="detail-msg">
            <div class="detail-content">
                <div class="book-content">
                    <div class="book-img">
                        <img :src="`${bookDetail?.link[1].href}?imageView&thumbnail=240y336`" alt="">
                    </div>
                    <div class="book-data">
                        <h3>{{ bookDetail.title }}</h3>
                        <div class="author">
                            <span>{{ bookDetail["pris:book"]?.category }}</span>
                            <span>{{ bookDetail.author.name }}</span>
                        </div>
                        <div class="start">
                            <ul class="start-good">
                                <li v-for="s, index in Math.ceil(bookDetail['pris:ranking'].value)" :key="index">
                                    <img src="@/assets/imgs/评分1.png" alt="">
                                </li>
                            </ul>
                            <ul class="start-bad">
                                <li v-for="s, index in (5 - Math.ceil(bookDetail['pris:ranking'].value))" :key="index">
                                    <img src="@/assets/imgs/评分2.png" alt="">
                                </li>
                            </ul>
                        </div>
                        <div class="data">
                            <span>{{ bookDetail["pris:subscribe"]?.clicksCount }}点击</span>
                        </div>
                        <div class="spend">
                            <span>{{ bookDetail["pris:book"]?.price }}阅点</span>
                        </div>
                    </div>
                </div>
                <div class="book-script">
                    <div class="path" v-if="bookScriptType == 'path'">
                        <p>{{ bookScript }}. . .</p>
                        <img src="@/assets/imgs/向下1.png" alt="" @click="bookScriptType = 'all'">
                    </div>
                    <div class="all" v-else>
                        <p>{{ bookDetail.content.text }}</p>
                    </div>
                </div>
                <div class="book-authorization">
                    <span>授权方：</span>
                    <span>{{ bookDetail["pris:book"]?.authorizer }}</span>
                </div>
                <div class="book-type">
                    <span>作品类型：{{ bookDetail["pris:book"]?.paydesc }}</span>
                </div>
                <div class="book-list">
                    <img src="@/assets/imgs/列表1.png" alt=""
                        @click="$router.push({ path: '/chapter', query: { avator: bookDetail?.link[1].href, author: bookDetail.author.name, title: bookDetail.title, uuid: $router.currentRoute.value.query.id } })">
                    <div class="new-chapter">
                        <span v-if="bookDetail['pris:book'].integrity == 1">共{{
                            bookDetail["pris:book"].totalArticleCount[0]
                        }}章</span>
                        <span v-if="bookDetail['pris:book'].integrity == 3">{{ updateMounth }}月{{ updateDay }}号
                            更至：{{ bookChapterList.reverse()[0]?.title }}</span>
                    </div>
                    <div class="all-chapter">
                        <span v-if="bookDetail['pris:book'].integrity == 1" class="red"
                            @click="$router.push({ path: '/chapter', query: { avator: bookDetail?.link[1].href, author: bookDetail.author.name, title: bookDetail.title, uuid: $router.currentRoute.value.query.id } })">已完结</span>
                        <span v-if="bookDetail['pris:book'].integrity == 3" class="green"
                            @click="$router.push({ path: '/chapter', query: { avator: bookDetail?.link[1].href, author: bookDetail.author.name, title: bookDetail.title, uuid: $router.currentRoute.value.query.id } })">连载中</span>
                        <img src="@/assets/imgs/向右1.png" alt="">
                    </div>
                </div>
            </div>
            <div class="deatil-reward">
            </div>
            <div class="detail-comment">
                <div class="comment-header">
                    <div class="left">
                        <span class="line"></span>
                        <span>评论</span>
                    </div>
                    <div class="right">
                        <img src="@/assets/imgs/写评论1.png" alt="">
                        <span>写评论</span>
                    </div>
                </div>
                <div class="comment-list">
                    <ul class="list">
                        <li v-for="c, index in bookComment.list.slice(0, 5)" :key="index">
                            <div class="avator-msg">
                                <div class="avator-img">
                                    <img :src="(c.avatar || 'https://easyreadfs.nosdn.127.net/RsyqfItTi1c4eJ3Nmm6a9A==/8796093023794550480') + '?imageView&thumbnail=240y336'"
                                        alt="">
                                </div>
                                <div class="author-msg">
                                    <div class="up">
                                        <span>{{ c.nickName }}</span>
                                        <span>LV.{{ c.userLevel }}</span>
                                    </div>
                                    <div class="down">
                                        <ul class="start-good">
                                            <li v-for="i, index in c.grade" :key="index">
                                                <img src="@/assets/imgs/评分1.png" alt="">
                                            </li>
                                        </ul>
                                        <ul class="start-bad">
                                            <li v-for="b, index in (5 - Math.ceil(c.grade))" :key="index">
                                                <img src="@/assets/imgs/评分2.png" alt="">
                                            </li>
                                        </ul>
                                        <span>{{ getCOmmentTime(c.time) }}</span>
                                    </div>
                                </div>
                                <div class="thumb-up">
                                    <span v-if="c.likes > 0">{{ c.likes }}</span>
                                    <img src="@/assets/imgs/点赞1.png" alt="">
                                </div>
                            </div>
                            <div class="avator-comment">
                                <p>{{ c.comment }}</p>
                            </div>
                            <div class="comment-reply">
                                <ul class="list" v-if="!showAllCommentList.includes(c.commentId) && c.replyCount > 0">
                                    <CommentPage v-for="item, index in c.replyList" :key="index" :comment="item" />
                                </ul>
                                <p @click="toShowAllReply(c.commentId)"
                                    v-if="!showAllCommentList.includes(c.commentId) && c.replyCount > 2">展开剩余部分</p>
                                <AllCommentPage v-if="showAllCommentList.includes(c.commentId)" :url="c.replyUrl" />
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="comment-all" v-if="bookComment.list.length > 5">
                    <span
                        @click="$router.push({ path: '/all-comment', query: { url: bookComment.next } })">查看全部评论</span>
                </div>
            </div>
        </div>
        <div class="detail-bottom">
            <ul>
                <li>
                    <span>加入书架</span>
                </li>
                <li>
                    <span>购买</span>
                </li>
                <li>
                    <span @click="$router.push({
                        path: '/content', query: {
                            source_uuid: $router.currentRoute.value.query.id, content_uuid: bookChapterList[bookChapterList.length - 1].id, title: $router.currentRoute.value.query.title, index: 0
                        }
                    })">免费试读</span>
                </li>
            </ul>
        </div>
    </div>
    <LoadingPage v-else />
</template>

<style lang="less" scoped>
.detail {
    width: 100vw;
    height: 100vh;
    background-color: #eee;
    position: relative;

    .detail-title {
        width: 100%;
        height: 50rem;

        .title {
            width: 100%;
            height: 100%;
            background-color: #fff;
            border-bottom: 1px solid #eee;
            box-sizing: border-box;
            position: absolute;
            top: 0;
            left: 0;

            padding: 0 10rem;
            display: flex;
            justify-content: space-between;
            align-items: center;

            img {
                width: 30rem;
                height: 25rem;

                &:last-child {
                    width: 25rem;
                    height: 25rem;
                }
            }

            .right {
                display: flex;

                span {
                    font-size: 14rem;
                    color: #fc1c1c;
                    border: 1rem solid #fc1c1c;
                    padding: 0 5rem;
                    border-radius: 5rem;
                }

                img {
                    margin-left: 15rem;
                }
            }
        }
    }

    .detail-bottom {
        width: 100%;
        height: 60rem;


        ul {
            width: 100%;
            height: 100%;
            display: flex;
            border-top: 1px solid #eee;
            background-color: #fff;
            position: absolute;
            bottom: 0;
            left: 0;
            box-sizing: border-box;

            li {
                width: 33.3%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;

                span {
                    font-size: 17rem;
                    display: flex;
                    justify-content: center;
                    width: 100%;

                }

                &:first-child {
                    border-right: 1rem solid #eee;

                    span {
                        font-weight: bold;
                        border-right: 1rem solid #ccc;
                    }
                }

                &:last-child {
                    background-color: rgb(230, 77, 46);

                    span {
                        color: #fff;
                    }
                }
            }
        }
    }

    .detail-msg {
        width: 100%;
        height: calc(100% - 110rem);
        overflow: auto;

        .detail-content {
            width: 100%;
            background-color: #fff;
            padding: 5rem 12rem 0 12rem;

            .book-content {
                display: flex;
                justify-content: left;

                .book-img {
                    margin-right: 15rem;

                    img {
                        width: 100rem;
                        display: block;
                        box-shadow: 0 0 5rem 1rem #ccc;
                    }
                }

                .book-data {
                    h3 {
                        font-weight: 400;
                    }

                    .author {
                        display: -webkit-box;
                        -webkit-box-orient: vertical; //从上到下垂直排列子元素(设置伸缩盒子的子元素的排列方式)
                        text-overflow: ellipsis; //溢出用省略号显示
                        overflow: hidden; //超出的文本隐藏
                        -webkit-line-clamp: 1; //表明3行文本显示省略号,这里要根据自身需求进行设置

                        span {
                            color: skyblue;
                            padding-left: 10rem;

                            &:first-child {
                                padding: 0 10rem 0 0;
                                border-right: 1rem solid #999;
                                color: #999;
                            }
                        }
                    }

                    .start {
                        display: flex;
                        padding-right: 4rem;
                        margin-top: 10rem;

                        ul.start-good {
                            display: flex;

                            li {
                                padding-right: 4rem;

                                img {
                                    width: 16rem;
                                }
                            }
                        }

                        ul.start-bad {
                            display: flex;

                            li {
                                padding-right: 4rem;

                                img {
                                    width: 16rem;
                                }
                            }
                        }
                    }

                    .data {
                        span {
                            margin-right: 15rem;
                        }
                    }

                    .spend {
                        span {
                            color: #fc1c1c;
                        }
                    }
                }


            }

            .book-script {
                margin-top: 15rem;
                position: relative;

                p {
                    font-size: 14rem;
                    color: #666;
                }

                img {
                    width: 20rem;
                    position: absolute;
                    bottom: 0;
                    right: 10rem;
                }
            }

            .book-authorization {
                margin-top: 10rem;

                span {
                    &:last-child {
                        color: skyblue;
                    }
                }
            }

            .book-type {
                padding-bottom: 20rem;
                border-bottom: 1px solid #eee;
            }

            .book-list {
                padding: 8rem 0;
                display: flex;
                align-items: center;

                img {
                    width: 25rem;
                }

                .new-chapter {
                    flex-grow: 1;
                    margin-left: 10rem;

                    span {
                        color: #2d2d2d;
                    }
                }

                .all-chapter {
                    width: 62rem;
                    display: flex;
                    align-items: center;

                    span {
                        &.green {
                            color: green;
                        }

                        &.red {
                            color: red;
                        }
                    }

                    img {
                        width: 25rem;
                        height: 20rem;
                    }
                }
            }
        }

        .detail-comment {
            margin-top: 10rem;
            background-color: #fff;
            padding: 15rem 10rem;

            .comment-header {
                display: flex;
                justify-content: space-between;
                align-items: baseline;

                .left {
                    display: flex;
                    justify-content: left;
                    align-items: center;

                    span {
                        color: #2d2d2d;
                        font-size: 17rem;

                        &.line {
                            display: flex;
                            width: 2rem;
                            height: 14rem;
                            background-color: #666;
                            margin-right: 6rem;
                        }
                    }
                }

                .right {
                    display: flex;
                    align-items: center;
                    border: 1rem solid #999;
                    padding: 3rem;
                    border-radius: 4rem;

                    img {
                        width: 18rem;
                        height: 18rem;
                        margin-right: 4rem;
                    }

                    span {
                        font-size: 16rem;
                        color: #666;
                    }
                }
            }

            .comment-list {
                ul.list {
                    li {
                        margin: 10rem 0 20rem;

                        .avator-msg {
                            display: flex;
                            justify-content: space-between;

                            .avator-img {
                                width: 45rem;
                                height: 45rem;
                                border-radius: 50%;
                                overflow: hidden;

                                img {
                                    width: 100%;
                                }
                            }

                            .author-msg {
                                flex-grow: 1;
                                margin-left: 15rem;

                                .up {
                                    span {
                                        color: rgb(56, 168, 212);
                                        font-size: 14rem;

                                        &:last-child {
                                            font-size: 12rem;
                                            color: #fc1c1c;
                                            border: 1rem solid #fc1c1c;
                                            padding: 0 4rem;
                                            margin-left: 8rem;
                                        }
                                    }
                                }

                                .down {
                                    display: flex;
                                    justify-content: left;
                                    align-items: center;

                                    ul.start-good {
                                        display: flex;

                                        li {
                                            margin-right: 3rem;

                                            img {
                                                width: 10rem;
                                            }
                                        }
                                    }

                                    ul.start-bad {
                                        display: flex;

                                        li {
                                            margin-left: 3rem;

                                            img {
                                                width: 10rem;
                                            }
                                        }
                                    }

                                    >span {
                                        color: #666;
                                        margin-left: 10rem;
                                    }
                                }
                            }

                            .thumb-up {
                                display: flex;
                                justify-content: left;
                                align-items: flex-start;

                                span {
                                    font-size: 14rem;
                                    color: #666;
                                }

                                img {
                                    width: 20rem;
                                }
                            }
                        }

                        .avator-comment {
                            margin-left: 60rem;
                        }

                        .comment-reply {
                            margin-left: 60rem;
                            background-color: rgba(175, 171, 171, 0.205);

                            ul.list {

                                padding: 10rem 10rem 3rem;
                            }

                            p {
                                color: rgb(56, 168, 212);
                                text-align: center;
                            }
                        }

                    }
                }
            }

            .comment-all {
                text-align: center;
                margin: 30rem 0 10rem;

                span {
                    border: 1rem solid #ccc;
                    padding: 5rem 20rem;
                    font-size: 18rem;
                    color: #666;

                }
            }
        }

    }


}
</style>

